<template>
	<uni-swiper-dot :info="imgList" :current="currentIndex" field="content" :mode="mode" :dotsStyles="dotsStyles">
		<swiper class="swiper-banner" autoplay="true" interval="3000" duration="1500" :style="{'height':height+'px'}" @change="swiperChange">
			<swiper-item v-for="(item , index3) in imgList" :key="index3" @click="onCenterItemClick(item)">
				<image :src="item" mode="aspectFill" style="width: 100%;" :style="{'height':height+'px', 'border-radius': radius+'px'}"></image>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>

<script>
	import uniSwiperDot from '../uni-swiper-dot/uni-swiper-dot.vue';
	export default {
		components: {
			uniSwiperDot
		},
		props: {
			//列表
			imgList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			height: {
				type: Number,
				default: 100
			},
			radius: {
				type: Number,
				default: 10
			},
			mode: {
				type: String,
				default: "dot"
			}
		},
		data() {
			return {
				currentIndex: 0,
				dotsStyles: {
					backgroundColor: '#CCCCCC',
					border: '1rpx solid #CCCCCC',
					color: '#fff',
					width: 3,
					height: 3,
					bottom: 8,
					spacing: 2,
					selectWidth: 16,
					selectedBackgroundColor: '#C2CF51',
					selectedBorder: '1rpx solid #C2CF51'
				},
			}
		},
		methods: {
			swiperChange(e) {
				this.currentIndex = e.detail.current;
			},
		}
	}
</script>

<style>
	.swiper-banner {
		width: 100%;
	}
</style>
